<template>
  <a-table
    :columns="columns"
    :dataSource="data"
    :pagination="false"
    :showHeader="false"
    :loading="false"
    @change="handleTableChange"
    rowClassName="custom-row"
  >
    <template v-slot:bodyCell="{ record, column }">
      <span v-if="record.status == 'success'" class="unread" @click="view(record)">
        <span v-if="column.key === 'status'">
          <a-tag
            class="all-read-buitton"
            :bordered="false"
            :color="statusColor(record.status)"
            >{{ record.status }}</a-tag
          >
        </span>
        <span v-else-if="column.key === 'message'">
          <a-tag class="all-read-buitton" :bordered="false" :color="record.status">{{
            statusColor(record.status)
          }}</a-tag
          >{{ record[column.key] }}
        </span>
        <span v-else>
          {{ record[column.key] }}
        </span>
      </span>
      <span v-else class="read">{{ record[column.key] }}</span>
    </template>
    <!-- <template v-slot:bodyCell="{ record, column }">
        <span v-if="record.status=='success'" class="unread" @click="view(record)">
          <span v-if="column.key === 'status'">
            <a-tag :color="statusColor(record.status)">{{ record.status }}</a-tag>
          </span>
          <span v-else>
            {{ record[column.key] }}
          </span>
        </span>
        <span v-else class="read">{{ record[column.key] }}</span>
    </template> -->
    <!-- <template v-slot:bodyCell="{ record, column }">
      <span v-if="column.key === 'status'">
        <a-tag :color="statusColor(record.status)">{{ record.status }}</a-tag>
      </span>
      <span v-else>
        <span v-if="record.status=='success'" class="unread" @click="view(record)">{{ record[column.key] }}</span>
        <span v-else class="read">{{ record[column.key] }}</span>
      </span>
    </template> -->
  </a-table>
  <div class="pagination-box">
    <a-row>
      <a-col :span="8">
        <a-tag
          color="success"
          :bordered="false"
          class="all-read-buitton"
          @click="markAllAsRead"
          >全部标记已读</a-tag
        >
      </a-col>
      <a-col :span="16">
        <a-pagination
          v-model:current="pagination.current"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          show-size-changer
          show-quick-jumper
          size="small"
          :show-total="(total) => `共 ${pagination.total} 项数据`"
          @change="handleTableChange"
          class="pagination"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from "vue";
import { Tag } from "ant-design-vue";

const data = ref([
  {
    id: "111",
    key: "status",
    status: "success",
    message: "恭喜您！您提交的基本信息已经通过，可以正常进行业务操作啦！",
    timestamp: "2023/07/09 18:39:06",
  },
  {
    id: "222",
    key: "2",
    status: "success",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2023/07/06 17:38:53",
  },
  {
    key: "3",
    status: "fail",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2023/07/06 17:38:53",
  },
  {
    key: "4",
    status: "",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2023/07/06 17:38:53",
  },
  {
    key: "4",
    status: "",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2023/07/06 17:38:53",
  },
  {
    key: "4",
    status: "",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2023/07/06 17:38:53",
  },
  {
    key: "4",
    status: "",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2023/07/06 17:38:53",
  },
  {
    key: "4",
    status: "",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2023/07/06 17:38:53",
  },
  {
    key: "4",
    status: "",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2023/07/06 17:38:53",
  },
  {
    key: "4",
    status: "",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2023/07/06 17:38:53",
  },
  {
    key: "4",
    status: "",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2024/07/06 17:38:53",
  },
  {
    key: "4",
    status: "",
    message:
      "很抱歉！您上传的开发商资质存在问题，资质证明图片不完整，无法确认信息真实性，请重新提交清晰完整的资质证明。",
    timestamp: "2024/08/06 17:38:53",
  },
  // 更多数据...
]);

const columns = ref([
  // {
  //   title: '状态',
  //   dataIndex: 'status',
  //   key: 'status',
  // },
  {
    title: "消息",
    dataIndex: "message",
    key: "message",
  },
  {
    title: "时间",
    dataIndex: "timestamp",
    key: "timestamp",
  },
]);

// 根据状态返回不同的颜色
function statusColor(status) {
  if (status === "success") {
    return "审核成功";
  } else if (status === "error" || status === "fail") {
    return "red";
  }
  return "grey";
}
const pagination = ref({
  current: 1,
  pageSize: 15,
  total: data.value.length,
});

const handleTableChange = (page, pageSize) => {
  console.log("handleTableChange=>分页回调pag, filters, sorter", page, pageSize);
  console.log("handleTableChange=>pagination", pagination.value);
  pagination.value.current = page;
  if (pageSize) {
    pagination.value.pageSize = pageSize;
  }
  // getList();//重新获取列表
};
const view = (record) => {
  console.log("Viewing record:", record);
};
// 全部标记已读
const markAllAsRead = () => {
  data.value.forEach((item) => {
    if (item.status === "success") {
      item.status = ""; // 将状态设置为已读
    }
  });
};
</script>

<style lang="less" scoped>
.read {
  color: #969696;
}
.unread {
  // color: black;
  cursor: pointer;
}
.pagination-box {
  margin-top: 10px;
  font-size: 14px;
  color: #31bc63;
}
.pagination {
  text-align: right;
}
.all-read-buitton {
  cursor: pointer;
  color: #31bc63;
}
</style>
